<template>
  <div class="app-container">
    <h2 v-if="courseInfo != ''" class="show">{{ '课程:' + courseInfo.name + '(课表:' + courseTimetableInfo.id + ')' }}</h2>

    <div class="filter-container">
      <el-input v-model="listQuery.courseName" placeholder="课程名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="uploadSignFilter">
        上传签字单
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :header-cell-style="{background:'#ccc',color:'black'}"
      :data="list"
      border
      stripe
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="用户ID" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userInfo.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userInfo.number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userInfo.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center">
        <template slot-scope="{row}">
          <span>{{ row.schoolClassInfo.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组别" align="center">
        <template slot-scope="{row}">
          <span v-if="Number(row.courseTimetableUserInfo.type) === 2">调出</span>
          <span v-else>{{ row.courseTimetableUserInfo.group }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否组长" align="center">
        <template slot-scope="{row}">
          <span>{{ isGroupManageOptions[row.courseTimetableUserInfo.is_group_manage] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作业状态" align="center">
        <template slot-scope="{row}">
          <span v-if="Number(row.courseTimetableUserInfo.type) === 2">调出</span>
          <span v-else>
            <span v-if="JSON.stringify(row.commit) === '[]'">未提交</span>
            <span v-else>{{ commitStatusOptions[row.commit.commit_status] }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commit.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作业文件" align="center">
        <template slot-scope="{row}">
          <span v-if="JSON.stringify(row.commit) !== '[]'"><a :href="returnImageUrl(row.url)" target="_blank" rel="noopener">预览</a></span>
        </template>
      </el-table-column>
      <el-table-column label="考核标准" align="center" width="150">
        <el-table-column v-for="(item) in kaoheInfo" :key="item.name" :label="item.name+'('+kaoheTypeOptions[item.type]+')'" align="center">
          <el-table-column :label="item.score + '%'" align="center">
            <template slot-scope="{row}">
              <span>{{ getScore(item.id, row.kaoheScore) }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="成绩" align="center">
        <template slot-scope="{row}">
          <span v-if="Number(row.courseTimetableUserInfo.type) === 2">调出</span>
          <span v-else>
            <span>{{ getUserScore(row.kaoheScore, kaoheInfo) }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="Number(row.commit.commit_status) === 1" type="primary" size="mini" @click="homeworkReturn(row.commit.id)">
            打回
          </el-button>
          <el-button v-if="Number(row.courseTimetableUserInfo.group) !== 0" type="primary" size="mini" @click="handleKaoheUpdate(row)">
            考核打分
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="110px" style="width: 400px; margin-left:50px;">
        <el-form-item label="签字单" prop="url">
          <ImageUpload :upload-name="uploadName" :upload-image-url="returnImageUrl(temp.score_confirm_sign_url)" @getReturnImageUrl="setReturnImageUrl" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateSignData()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="考核打分" :visible.sync="kaoheFormVisible">
      <el-form ref="kaoheForm" :model="kaoheform" label-position="left" label-width="110px" style="width: 400px; margin-left:50px;">
        <div v-for="(item, index) in kaoheform.kaoheScore" :key="index">
          <el-form-item v-if="Number(item.type) === 0 || Number(kaoheform.is_group_manage ) === 1" :label="item.name">
            <el-input-number v-model="item.score" :min="0" :max="100" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="kaoheFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="kaoheUpdate()">
          确定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { professorHomeworkCommitPage, homeworkCommitUpdate, homeworkUpdate } from '@/api/homework'
import waves from '@/directive/waves' // waves directive
import { getFileUrl, notifySuccess } from '@/utils/tool'
import { kaoheUserUpdate } from '@/api/course'

export default {
  name: 'HomeworkProfessor',
  components: { },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      kaoheInfo: '',
      courseInfo: '',
      courseTimetableInfo: '',
      homeworkInfo: '',
      kaoheform: {
        kaoheScore: [],
        userId: '',
        is_group_manage: false
      },
      total: 0,
      listLoading: true,
      listQuery: {
      },
      homeworkId: '',
      kaoqinIsPassOptions: { 0: '不合格', 1: '合格' },
      homeworkTypeOptions: { 1: '个人作业', 2: '班级小组作业' },
      commitStatusOptions: { 0: '未提交', 1: '已提交', 2: '已打回' },
      isGroupManageOptions: { 0: '不是', 1: '是' },
      kaoheTypeOptions: { 0: '个人', 1: '小组' },
      temp: {
        id: '',
        commit_status: ''
      },
      score_confirm_sign_url: '',
      dialogFormVisible: false,
      kaoheFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        url: [{ required: true, message: '作业地址必填', trigger: 'change' }]
      },
      uploadName: 'UpLoadImageScoreSign',
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      professorHomeworkCommitPage({}).then(response => {
        this.kaoheInfo = response.data.kaoheInfo
        this.courseInfo = response.data.courseInfo
        this.courseTimetableInfo = response.data.courseTimetableInfo
        this.homeworkInfo = response.data.homeworkInfo
        this.list = response.data.list
        this.listLoading = false
      })
    },
    handleFilter() {
      this.getList()
    },
    // 作业打回
    homeworkReturn(commitId) {
      homeworkCommitUpdate({ id: commitId, commit_status: 2 }).then(() => {
        this.getList()
      })
    },
    // 上传签字涵
    uploadSignFilter() {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    // 修改签字涵
    updateSignData() {
      homeworkUpdate({ id: this.homeworkId, score_confirm_sign_url: this.score_confirm_sign_url }).then(() => {
        this.dialogFormVisible = false
        notifySuccess(this, '修改成功')
        this.getList()
      })
    },
    handleKaoheUpdate(row) {
      this.kaoheform.is_group_manage = row.courseTimetableUserInfo.is_group_manage
      this.kaoheform.kaoheScore = row.kaoheScore
      this.kaoheform.userId = row.userInfo.id
      this.kaoheFormVisible = true
    },
    kaoheUpdate() {
      kaoheUserUpdate({ json: JSON.stringify(this.kaoheform) }).then(() => {
        notifySuccess(this, '修改成功')
        this.kaoheFormVisible = false
        this.getList()
      })
    },
    getScore(id, kaoheScore) {
      var num = ''
      kaoheScore.forEach(item => {
        if (Number(item.id) === Number(id)) {
          num = item.score
        }
      })
      return num
    },
    getUserScore(kaoheScore, kaoheInfo) {
      var num = 0
      kaoheScore.forEach(score => {
        kaoheInfo.forEach(info => {
          if (Number(score.id) === Number(info.id)) {
            num += info.score * score.score / 100
          }
        })
      })
      return num
    },
    returnImageUrl(url) {
      return getFileUrl(url)
    },
    setReturnImageUrl: function(data) {
      this.score_confirm_sign_url = data
      notifySuccess(this, '签字涵上传成功,请点击确定修改')
    }
  }
}
</script>

